<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>光学反向预测</title>
    <!-- 引入 在线Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5" style="background-color: antiquewhite">
    <h1 class="text-center">光学反向预测</h1>
    <div class="row">
        <div class="col-md-6"
             style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            主动光学
        </div>
        <div class="col-md-6"
             style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            被动光学
        </div>
    </div>
    <form id="prediction-form" class="mt-5">
        <div class="mb-3">
            <label for="inputData" class="form-label">输入数据</label>
            <input type="text" class="form-control" id="inputData" placeholder="请输入数据">
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
    <div id="result-container" class="mt-5 text-center"></div>
</div>


<!-- 引入 在线Bootstrap JS 和依赖项 -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<script>
    document.getElementById('prediction-form').addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止表单默认提交行为

        const inputData = document.getElementById('inputData').value;

        fetch('/api/predict', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({data: inputData})
        })
            .then(response => response.json())
            .then(data => {
                document.getElementById('result-container').innerText = `预测结果: ${data.result}`;
            })
            .catch(error => console.error('Error:', error));
    });

    function firstFunction() {

    }

    function secondFunction() {

    }

    document.getElementById('someButton').addEventListener('click', () => {
        firstFunction(() => {
            secondFunction();
        });
    });

    function asyncFirstFunction() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('asyncFirstFunction has completed');
                resolve(); // 当条件满足时调用 resolve
            }, 1000); // 模拟异步操作
        });
    }

    function asyncSecondFunction() {
        return new Promise((resolve) => {
            console.log('asyncSecondFunction has started');
            resolve(); // 或者做一些异步处理再调用 resolve
        });
    }

    // 使用 .then() 来保证顺序执行
    asyncFirstFunction().then(asyncSecondFunction);
</script>
</body>
</html>